<template>
  <div>
    <main>
      <!-- 搜索栏 -->
      <div class="search">
        <el-input
          placeholder="请输入姓名"
          prefix-icon="el-icon-search"
          v-model="keywords"
        >
        </el-input>

        <el-button type="primary" icon="el-icon-search" @click="searchUsers"
          >搜索</el-button
        >
        <el-button
          id="resetbtn"
          type="primary"
          icon="el-icon-refresh"
          @click="toggleSelection()"
          >重置</el-button
        >
      </div>

      <!-- 表格区域 -->
      <el-table
        border
        ref="multipleTable"
        :data="studentsList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" type="selection" width="40">
        </el-table-column>
        <el-table-column align="center" label="序号" type="index" width="60">
        </el-table-column>
        <el-table-column
          align="center"
          prop="nickname"
          label="姓名"
          width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="testTime"
          label="考试时间"
          width="240"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.testTime == null ? "暂无" : scope.row.testTime }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="pubWorkTime"
          label="布置作业时间（实时更新）"
          width="240"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.createdate }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="pubWorkNum"
          label="布置作业总题数"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.num }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="reportNum"
          label="状态"
          width="100"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.reportNum > 0 ? "是" : "否" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="ifPass"
          label="状态"
          width="200"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="toTodayWorkList(scope.row.userId, scope.row.nickname)"
              >查看作业</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- <el-table
        v-if="filterFlag"
        border
        ref="multipleTable"
        :data="filterList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" type="selection" width="40">
        </el-table-column>
        <el-table-column align="center" label="序号" type="index" width="60">
        </el-table-column>
        <el-table-column
          align="center"
          prop="nickname"
          label="姓名"
          width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="testTime"
          label="考试时间"
          width="240"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.testTime == null ? "暂无" : scope.row.testTime }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="pubWorkTime"
          label="布置作业时间（实时更新）"
          width="240"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="pubWorkNum"
          label="布置作业总题数"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="reportNum"
          label="状态"
          width="100"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.reportNum > 0 ? "是" : "否" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="ifPass"
          label="状态"
          width="200"
          show-overflow-tooltip
        >
          <el-button
            type="primary"
            size="mini"
            @click="checkWorkList(scope.row)"
            >查看作业</el-button
          >
        </el-table-column>
      </el-table> -->
    </main>
  </div>
</template>

<script>
import api from '@/config/api'
import { sendPost } from '@/utils/http'
export default {
  data () {
    return {
      options: [{
        value: '选项1',
        label: '是'
      }, {
        value: '选项2',
        label: '否'
      }],
      value: '', // 是否考过value
      keywords: '', // 姓名搜索
      // 学生列表数据
      studentsList: [],
      // 学生列表
      total: 0,//总题数
      page: 1,
      rows: 10,
      pages: 0, //总页数
      multipleSelection: [],
    }
  },
  created () {
    this.getTodayWorkStudentList()
  },
  methods: {
    checkWorkList (row) {
      console.log(row);
      // this.$router.push('/TodayWork/TodayWorkList')
    },
    // 关键字搜索学生
    searchUsers () {
      if (this.keywords.trim().length) {
        sendPost(api.getTodayWork, {
          page: 1,
          rows: 20,
          nickname: this.keywords
        }).then(res => {
          // console.log(res.data)
          this.studentsList = res.data.list
        })
      } else {
        this.$msg.info('请输入姓名后再搜索~')
      }
    },
    // 获取今日作业学生列表
    getTodayWorkStudentList () {
      sendPost(api.getTodayWork, {
        page: 1,
        rows: 20,
        nickanme: ""
      }).then(res => {
        // console.log(res.data)
        this.studentsList = res.data.list
      })
    },
    // 取消复选框选择状态
    toggleSelection (rows) {
      if (this.keywords.length) {
        this.getTodayWorkStudentList()
        this.filterFlag = false
        this, this.keywords = ""
      }
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    toTodayWorkList (id, name) {
      this.$router.push('TodayWork/TodayWorkList')
      sessionStorage.setItem('uid', id)
      sessionStorage.setItem('uname', name)
    }
  }
}
</script>

<style lang="less" scoped>
main {
  width: 75rem;
  margin: 0 auto;
  /deep/.el-button--primary {
    background-color: #ff5342;
    border-color: #ff5342;
  }
  .search {
    margin-top: 30px;
    height: 4rem;
    line-height: 4rem;
    background-color: #fff;
    #resetbtn {
      margin-right: 42.875rem;
    }
    .el-input {
      width: 15.3rem;
      margin-right: 3.3rem;
      border-radius: 50% !important;
    }
    .el-button {
      margin-right: 2rem;
      height: 2.5rem;
      border: none;
    }
    #pub_work {
      margin-left: 4.5rem;
      margin-right: 0;
    }
    /deep/.el-button--mini,
    .el-button--mini.is-round {
      padding: 0.4375rem 0.4375rem;
    }
  }
}
</style>
